<template>
  <div class="main_content">
    <father-title></father-title>
    <div class="contentBox">
      <header-tabs>
        <template slot="tabs">
          <div>
            <div class="select_tab">人员管理</div>
          </div>
        </template>
      </header-tabs>

      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.username" placeholder="请输入用户名"></Input>
          </template>

          <template slot="right">
            <Button v-if="$store.state.perms.includes('sys:user:save')" type="primary" @click="addData">新增</Button>
          </template>
        </search-box>

        <v-table :loading="pageConfig.loading" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="status">
            <span>{{status.find((item)=>item.value===row.status).key}}</span>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:user:update')" type="primary" size="small" @click="editData(row)">修改</Button>
            <Button v-if="$store.state.perms.includes('sys:user:update')" class="button_spacing" type="primary" size="small" @click="editPw(row)">修改密码</Button>
            <Button v-if="$store.state.perms.includes('sys:user:delete')" class="button_spacing" type="error" size="small" @click="deleteData(row)">删除</Button>
          </template>
        </v-table>

        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    </div>

    <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        @on-ok="editPassword">
      <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="top"
          slot="content">
        <FormItem label="新密码" prop="newPassword">
          <Input type="password" v-model="formValidate.newPassword" placeholder="" />
        </FormItem>
        <FormItem label="确认密码" prop="confirmPassword">
          <Input type="password" v-model="formValidate.confirmPassword" placeholder="" />
        </FormItem>
      </Form>
    </AddOrEditModal>
  </div>
</template>

<script>
import {columns, pageConfig, status} from "./pageConfig";

export default {
  name: 'PersonalManage',

  data() {
    let self = this;
    return {
      modalCTL: {
        show: false,
        loading: true,
        title: "修改密码"
      },
      formValidate: {
        userId: null,
        newPassword: '',
        confirmPassword: '',
      },
      ruleValidate: {
        newPassword: [{required: true, message: "新密码不能为空", trigger: "change"}],
        confirmPassword: [{required: true, validator:(rule, value, callback)=>{
            if(self.formValidate.newPassword !== value){
              callback(new Error("输入的密码不一致"));
            }else{
              callback();
            }
          }, trigger: "change"}],
      },
      status,
      columns,
      pageConfig,
      list: [],
      searchParams: {
        username: null
      },
    };
  },

  mounted() {
    this.getList(this.pageConfig);
  },

  methods: {
    // 点击修改密码
    editPw(data){
      this.formValidate.userId = data.userId;
      this.modalCTL.show = true;
    },

    // 修改密码
    editPassword(){
      // 校验数据
      this.$refs.form.validate(state => {
        if (!state){
          this.modalCTL.loading = false;
          this.$nextTick(() => {
            this.modalCTL.loading = true;
          });
          return this.$Message.warning("请填写对应的值");
        }
        // 修改密码
        this.$api.post('sp/sys/user/resetPassword', {}, {
          params: {
            userId: this.formValidate.userId,
            newPassword: this.$utils.util.rsaEncrypt(this.formValidate.newPassword)
          }
        }).then((res)=>{
          if(res.data.code === 0){
            this.$Message.success("修改密码成功");
            this.formValidate.userId = null;
            this.formValidate.newPassword = '';
            this.formValidate.confirmPassword = '';
          }
        }).finally(()=> this.modalCTL.show = false);
      });
    },

    // 删除数据
    deleteData(data){
      this.$Modal.confirm({
        title: '删除',
        content: `是否删除${data.username}？`,
        loading: true,
        onOk: () => {
          this.$api.post('sp/sys/user/delete', [data.userId]).then((res)=>{
            if(res.data.code === 0){
              this.getList(this.pageConfig);
              this.$Message.success('删除成功');
            }
          }).finally(()=>this.$Modal.remove());
        }
      });
    },

    // 新增数据
    addData(){
      this.$router.push({name: "AddOrEditPersonal", params: {type_id: 'add'}});
    },

    // 修改数据
    editData(data){
      this.$router.push({name: "AddOrEditPersonal", params: {type_id: data.userId}});
    },

    // 获取列表
    getList(page){
      this.pageConfig.loading = true;
      this.$api.get("sp/sys/user/list", {
        params: {
          page: page.pageNow,
          limit: page.pageSize,
          ...this.searchParams,
        }
      }).then((res)=>{
        if(res.data.code === 0){
          this.list = res.data.page.list;
          this.pageConfig.total = res.data.page.totalCount;
        }
      }).finally(()=>{
        this.pageConfig.loading = false;
      });
    },

    // 搜索
    search(){
      this.pageConfig.pageNow = 1;
      this.getList(this.pageConfig);
    },
  }
};
</script>

<style scoped lang="less">
</style>